<template>
  <el-card class="restaurant-card">
    <div class="restaurant-header">
      <el-image :src="restaurantData.coverImageUrl" alt="封面图片"
        style="width: auto; height: 30vw; object-fit: cover; border-radius: 5px;" />
      <h1 class="restaurant-name">{{ restaurantData.name }}</h1>
      <p class="restaurant-area">{{ restaurantData.area }}</p>
      <el-rate v-model="restaurantData.rating" :disabled="true" />
      <div class="restaurant-meta">
        <el-tag>{{ restaurantData.recommendedCount }} 推荐</el-tag>
        <el-tag>{{ restaurantData.viewCount }} 浏览</el-tag>
      </div>
    </div>

    <el-button class="back" @click="handleClickBack()"><el-icon>
        <ArrowLeft />
      </el-icon>返回</el-button>

    <div class="restaurant-body">
      <p><strong>用餐推荐:</strong> {{ restaurantData.diningRecommendation }}</p>

      <h3>特色</h3>
      <el-tag v-for="feature in restaurantData.features" :key="feature.id" type="success">
        {{ feature.feature }}
      </el-tag>
      <el-tag @click="showFeatureDialog = true" class="add-feature" type="info">
        添加特色
      </el-tag>

      <h3 style="display: flex; justify-content: space-between;">推荐菜品
        <el-button type="primary" @click="showDishDialog = true">添加菜品</el-button>
      </h3>
      <el-row :gutter="20">
        <el-col v-for="dish in visibleDishes" :key="dish.id" :span="4" style="margin-bottom: 15px; border-radius: 10px;">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div class="dish-container">
              <el-image :src="dish.imgUrl" style="width: 100%; height: 150px; object-fit: cover;" />
              <div class="dish-name">{{ dish.name }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-button v-if="restaurantData.recommendedDishes.length > 10" @click="toggleExpand" type="text">
        {{ isExpanded ? '收起' : '查看更多' }}
      </el-button>

      <reviewList :restaurant-id="restaurantId"></reviewList>
      <el-button type="primary" @click="showReviewDialog = true">添加评论</el-button>

      <!-- 添加菜品的对话框 -->
      <el-dialog v-model="showDishDialog" class="dialog" :show-close="false">
        <addDishe :restaurant-id="restaurantId"></addDishe>

      </el-dialog>

      <!-- 添加特色的对话框 -->
      <el-dialog v-model="showFeatureDialog" class="dialog" :show-close="false">
        <AddFeature :restaurant-id="restaurantId"></AddFeature>
      </el-dialog>

      <!-- 添加评论的对话框 -->
      <el-dialog v-model="showReviewDialog" class="dialog" :show-close="false">
        <AddReview :restaurant-id="restaurantId"></AddReview>
      </el-dialog>

    </div>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRoute } from 'vue-router';
import AddReview from './components/reviewUpload.vue';
import reviewList from './components/reviewList.vue';
import AddFeature from './components/addFeature.vue';
import addDishe from './components/addDishe.vue';
const route = useRoute();

interface Feature {
  id: number;
  restaurantId: number;
  feature: string;
}

interface RecommendedDish {
  id: number;
  restaurantId: number;
  name: string;
  imgUrl: string;
}

interface RestaurantData {
  id: number;
  name: string;
  area: string;
  rating: number;
  recommendedCount: number;
  viewCount: number;
  diningRecommendation: string;
  coverImageUrl: string;
  features: Feature[];
  recommendedDishes: RecommendedDish[];
}

interface ApiResponse {
  data: RestaurantData;
  code: number;
  msg: string;
}

const restaurantId = route.params.id;
const restaurantData = ref({
  id: 1,
  name: 'The Great Eatery',
  area: '市中心',
  rating: 4.5,
  recommendedCount: 120,
  viewCount: 3000,
  diningRecommendation: '适合家庭聚会',
  coverImageUrl: 'http://example.com/images/restaurant-cover.jpg',
  features: [
    { id: 4, restaurantId: 1, feature: '室外座位' },
    { id: 5, restaurantId: 1, feature: '免费Wi-Fi' },
  ],
  recommendedDishes: [
    { id: 1, restaurantId: 1, name: '菜品1', imgUrl: 'http://example.com/images/dish1.jpg' },
    { id: 2, restaurantId: 1, name: '菜品2', imgUrl: 'http://example.com/images/dish2.jpg' },
    { id: 3, restaurantId: 1, name: '菜品3', imgUrl: 'http://example.com/images/dish3.jpg' },
    { id: 4, restaurantId: 1, name: '菜品4', imgUrl: 'http://example.com/images/dish4.jpg' },
    { id: 5, restaurantId: 1, name: '菜品5', imgUrl: 'http://example.com/images/dish5.jpg' },
  ],
});

const handleClickBack = () => {
  window.history.go(-1);
}

// Toggle state for showing more dishes
const isExpanded = ref(false);

const visibleDishes = computed(() => {
  return isExpanded.value ? restaurantData.value.recommendedDishes : restaurantData.value.recommendedDishes.slice(0, 10);
});

// Toggle expand/collapse of dishes
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
}

onMounted(() => {
  axios.get(`/api/restaurants/${restaurantId}`)
    .then(rsp => {
      if (rsp.data.code !== 200) {
        ElMessage.error('加载餐厅数据失败');
        return;
      }
      const data = rsp.data.data;

      // 过滤掉 id 为 0 的 features 和 recommendedDishes
      data.features = data.features.filter((feature: Feature) => feature.id !== 0);
      data.recommendedDishes = data.recommendedDishes.filter((dish: RecommendedDish) => dish.id !== 0);

      restaurantData.value = data;
      console.log(rsp.data.data);
    });
});

// States for controlling modals
const showDishDialog = ref(false);
const showFeatureDialog = ref(false);
const showReviewDialog = ref(false);


</script>

<style scoped>
.restaurant-card {
  max-width: 900px;
  margin: 5% auto;
  padding: 20px;
  border-radius: 12px;
}

.restaurant-header {
  text-align: center;
}

.restaurant-name {
  font-size: 2rem;
  margin: 10px 0;
}

.restaurant-area {
  color: #888;
}

.restaurant-meta {
  margin-top: 10px;
}

.review-header {
  display: flex;
  align-items: center;
}

.review-username {
  margin-left: 10px;
  font-weight: bold;
}

.add-feature {
  margin-left: 20px;
  color: #409EFF;
  cursor: pointer;
}

.dish-container {
  position: relative;
  text-align: center;
}

.dish-name {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}
</style>
<style>
.dialog {
  background: transparent;
  box-shadow: none;
  /* 去除阴影 */
}

.back {
  cursor: pointer;
  position: absolute;
  left: 12%;
  top: 12%;
}

.back:hover {
  filter: brightness(0.8) contrast(1.2);
}
</style>